<template>
  <div class="test-container" v-bind="componentSchema">
    <h2>{{ props.componentSchema.label }}</h2>
    <!-- 编辑节点 设计时会替换该edit-node插槽内容 start -->
    <slot name="edit-node">
      <template
        v-for="subcomponentSchema in props.componentSchema.children"
        :key="subcomponentSchema.id"
      >
        <!-- EBuildr组件通过node插槽渲染 start -->
        <slot name="node" :componentSchema="subcomponentSchema" />
      </template>
    </slot>
  </div>
</template>

<script setup lang="ts">
import type { ComponentSchema } from "epic-designer";
import type { PropType } from "vue";

const props = defineProps({
  componentSchema: {
    default: () => ({}),
    required: true,
    type: Object as PropType<ComponentSchema>,
  },
});
</script>
<style>
.test-container {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
}
</style>
